Working with HTML Element Box Properties
Till now, you have learned how to work with background, text, font, and list properties. In the next section, let’s discuss the HTML element box properties.
An HTML element box works as a container for other HTML elements, for example, the <div> and <p> elements. It is similar to a rectangle enclosing a block of elements inside it. An HTML element box allows you to define properties that are common to a set of elements at one place. HTML element boxes have borders, margins, padding, and content.
Below given lists the available HYML element box properties;
Below given lists the available HYML element box properties;
|
Property |
Description |
|---|---|
|
border |
Is a shorthand property for border-width, border-style, and border-color properties. It sets the width, style, and color for all four borders of an HTML element box in one declaration. |
|
border-top, border-right, border-bottom, and border-left |
Specify the width, style and color of the top, right, bottom, and left borders, respectively, of an HTML element box. |
|
border-color |
Specifies the color of the four borders of an HTML element box. You can set this property to transparent, a predefined color name, or a color value. |
|
border-top-color, border-right-color, border-bottom-color, and border-left-color |
Specify the colors of the top, right , bottom, and left borders, respectively, or an HTML element box. You can set this property to transparent, a predefined color name, or a color value. |
|
border-style |
Specifies the styles of top, right, bottom, and left borders, respectively, of an HTML element box. You can set each of these properties to none, dotted, dashed, solid, double, groove, ridge, inset, or outset. |
|
border-width |
Defines the shorthand property for border-top-width, border-top-right-width, border-bottom-width, and border-left-width properties. It sets the border widths of all four sides of an HTML element in one declaration. |
|
border-top-width, border-right-width, border-bottom-width, and border-left-width |
Specify the widths of top, right, bottom, and left borders of an HTML element box, respectively. You can set each of these properties to thin, medium, thick, or specify these in the form of a length value. |
|
clear |
Specifies the content height and width, respectively, of an HTML element box; you can set each of these properties to auto or specify it in the form of a length value using a unit identifier, such as px (pixels), in (inches), pt (points, 1/72 of an inch), and cm (centimeters), or a percentage value. |
|
margin |
Is a shorthand property for margin-top, margin-right, margin-bottom, and margin-left properties. It sets all these margin properties of an HTML element box in one declaration. |
|
margin-top, margin-right, margin-bottom, and margin-left |
Specify margins of top, right, bottom, and left borders, respectively, of an HTML element box. You can set each of these properties to auto or specify it in the form of a length value using a unit identifier, such as px (pixels), in (inches), pt (points, 1/72 of an inch), and cm (centimeters), or a percentage value. |
|
max-height and max-width |
Specify the maximum height and width, respectively, or an HTML element. You can set both of these properties to none or specify these in the form of a length or percentage value. |
|
min-height and min-width |
Specify the minimum height and width, respectively, of an HTML element, you can set both of these properties to none or specify these in the form of a length or percentage value. |
|
padding |
Is a shorthand property for padding-top, padding-right, padding-bottom, and padding-left properties. it sets all these padding properties for an HTML element box in one declaration. |
|
padding-top, padding-right, padding-bottom, and padding-left |
Specify the top, right, bottom, and left padding, respectively, or an HTML element box. You can set each of these properties in the form of a length or percentage value. |
Let’s now learn to set the border for an HTML element box, go through next button.